<?php

ThemeAssets::addJs($themeAssetsPath . "user/role/index.js");

ThemeAssets::output();
?>
<meta name="_token" content="{{csrf_token()}}">
@extends('themeView::layouts.app')

@section('content')
    <el-tabs value="first">
        <el-tab-pane label="角色管理" name="first">
            <!--搜索-->
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item>
                    <el-button type="primary" @click="dialogFormVisible = true">添加用户</el-button>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchForm.name" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchForm.status" placeholder="状态">
                        <el-option label="全部" value="all"></el-option>
                        <el-option label="活跃" value="0"></el-option>
                        <el-option label="锁定" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearchSubmit">查询</el-button>
                </el-form-item>
            </el-form>
            <!--数据内容-->
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    :row-class-name="tableRowClassName">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态">
                </el-table-column>
                <el-table-column
                        prop="created_at"
                        label="创建时间">
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="pagination">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                layout="total, prev, pager, next"
                :total="totalPage">
                </el-pagination>
            </div>

        </el-tab-pane>
    </el-tabs>
@endsection
